<template>
  <!--练习统计-->
  <view class="practiceUser flex flex-column">
    <view class="table f_1 flex flex-column" v-if="sortList.length !== 0">
      <scroll-view scroll-y style="height: 100%" lower-threshold="60" @scrolltolower="scrolltolower"
        class="list-wrapper">
        <view class="table-header flex flex-row">
          <text style="width:120px">编号</text>
          <text class="f_1">姓名</text>
          <view style="width: 70px" class="flex item-center" @click="sortChange">
            <view>{{ practiceType == 2 ? '平均正确率' : '成绩' }}</view>
            <view style="margin-left: 4px" v-if="practiceType != 2">
              <u-icon name="arrow-up-fill" :color="arrowUpColor" size="8"></u-icon>
              <u-icon name="arrow-down-fill" :color="arrowDownColor" size="8"></u-icon>
            </view>
          </view>
        </view>
        <view class="table-body">
          <view v-for="(item, index) in sortList" :key="index" class="flex flex-row row item-center"
            @click="rowClick(item)">
            <view style="width: 120px" v-if="index < 3" class="icon">
              <image
                :src="'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/' + (index + 1) + '-icon.png'" />
            </view>
            <view style="width: 120px" v-else>
              <text style="margin-left: 17px">{{ index + 1 }}</text>
            </view>
            <view class="f_1">{{ item.nickName }}</view>
            <view style="width: 70px" class="flex flex-row item-center between">
              <text>{{ practiceType == 2 ? item.rate : practiceType == 3 ? item.scoreInt : item.score }}</text>
              <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <Empty v-else style="margin-top: 30%;"></Empty>
    <!-- <button class="btn-item" plain open-type="share">
      <view class="btn">发送练测</view>
    </button> -->
  </view>
</template>

<script>
import Table from "@/improve/components/Table/Table.vue";
import Empty from "@/improve/components/common/Empty.vue";
import { pageUpgPracticeStudentByDate, pageLcPracticeCountStudent, pageJsPracticeCountLevelStudent, pageUpgPracticeDate } from "@/improve/services";
export default {
  name: "practiceUser",
  components: { Table, Empty },
  data() {
    return {
      upgPracticeUuid: "",
      practiceType: 1,
      levelUuid: '',
      date: "",
      list: [],
      pageNo: 1,
      pageTotal: 0,
      scoreSort: null, // 0:升序 1:降序
    }
  },
  computed: {
    arrowUpColor() {
      return this.scoreSort === 0 ? 'green' : '#999'
    },
    arrowDownColor() {
      return this.scoreSort === 1 ? 'green' : '#999'
    },
    sortList() {
      if (this.scoreSort === 0) {
        return this.list.sort((a, b) => {
          return a.scoreInt - b.scoreInt
        })
      } else if (this.scoreSort === 1) {
        return this.list.sort((a, b) => {
          return b.scoreInt - a.scoreInt
        })
      } else {
        return this.list
      }
    }
  },
  methods: {
    sortChange() {
      switch (this.scoreSort) {
        case null:
          this.scoreSort = 0;
          break;
        case 0:
          this.scoreSort = 1;
          break;
        case 1:
          this.scoreSort = null;
          break;
        default:
          this.scoreSort = null
          break;

      }
    },
    // 获取成绩统计 - 每日一练
    pageUpgPracticeStudentByDate() {
      pageUpgPracticeStudentByDate({ upgPracticeUuid: this.upgPracticeUuid, date: this.date, pageNo: this.pageNo, pageSize: 10 }).then(res => {
        this.list = this.pageNo === 1 ? [...res.page.datas] : [...this.list, ...res.page.datas]
        this.pageTotal = res.totalPage
      })
    },
    // 获取成绩统计 - 在线练测
    pageLcPracticeCountStudent() {
      pageLcPracticeCountStudent({ upgPracticeUuid: this.upgPracticeUuid, pageNo: this.pageNo, pageSize: 10 }).then(res => {
        const data = res.datas.map(i => {
          return { ...i, rate: i.rate ? `${i.rate}%` : '-' }
        })
        this.list = this.pageNo === 1 ? [...data] : [...this.list, ...data]
        this.pageTotal = res.totalPage
      })
    },
    // 获取成绩统计 - 知识竞赛
    pageJsPracticeCountLevelStudent() {
      pageJsPracticeCountLevelStudent({ levelUuid: this.levelUuid, pageNo: this.pageNo, pageSize: 10 }).then(res => {
        this.list = this.pageNo === 1 ? [...res.datas] : [...this.list, ...res.datas]
        this.pageTotal = res.totalPage
      })
    },
    // 获取成绩统计 - 有奖答题
    pageUpgPracticeDate() {
      pageUpgPracticeDate({ upgPracticeUuid: this.upgPracticeUuid, pageNo: this.pageNo, pageSize: 10 }).then(res => {
        const data = res.datas?.map(i => ({
          ...i,
          scoreInt: i.scoreInt ? i.scoreInt : 0,
        }))
        this.list = this.pageNo === 1 ? [...data] : [...this.list, ...data]
        this.pageTotal = res.totalPage
      })
    },
    getList() {
      if (this.practiceType == '1') {
        this.pageUpgPracticeStudentByDate()
      } else if (this.practiceType == '2') {
        this.pageLcPracticeCountStudent()
      } else if (this.practiceType == '3') {
        this.pageJsPracticeCountLevelStudent()
      } else if (this.practiceType == '4') {
        this.pageUpgPracticeDate()
      }
    },
    rowClick(item) {
      if (this.practiceType == 2) {
        uni.navigateTo({
          url: `/improve/publish/answerDetail/index?practiceType=${this.practiceType}&upgPracticeJoinIds=${item.upgPracticeJoinIds}&upgPracticeUuid=${this.upgPracticeUuid}&studentId=${item.studentId}`,
        })
      } else {
        uni.navigateTo({
          url: `/improve/publish/scoreStatistics/practiceChart?checkUuid=${item.checkUuid}`,
        })
      }
    },
    scrolltolower() {
      if (this.pageNo < this.pageTotal) {
        this.pageNo++;
        this.getList()
      }
    }
  },
  onLoad(options) {
    this.upgPracticeUuid = options.upgPracticeUuid
    this.date = options.date
    this.practiceType = options.practiceType
    this.levelUuid = options.levelUuid
    this.getList()
  },
  // 1.发送给朋友
  onShareAppMessage(res) {
    console.log
    return {
      title: '练促优',
      path: `/improve/join/practiceDetail?upgPracticeUuid=${this.upgPracticeUuid}&practiceType=${this.practiceType}`,
      imageUrl: '',
    }
  },
  //2.分享到朋友圈
  onShareTimeline(res) {
    return {
      title: '练促优',
      path: `/improve/join/practiceDetail?upgPracticeUuid=${this.upgPracticeUuid}&practiceType=${this.practiceType}`,
      imageUrl: '',
    }
  },
}
</script>

<style scoped lang="scss">
.practiceUser {
  height: 100vh;
  width: 100vw;
  // padding-bottom: calc(20px + env(safe-area-inset-bottom));

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .table {
    margin-top: 10px;
    background-color: #FFFFFF;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));

    .table-header {
      padding: 18px 20px;
      font-size: 28rpx;
      color: #999999;
    }

    .table-body {
      .row {
        padding: 15px 16px;
        font-size: 32rpx;
        color: #333333;
        //border-bottom: solid 1px #F2F2F2;
      }

      .row:nth-child(-n+3) {
        padding: 15px 16px;
      }

      .icon {
        image {
          width: 44px;
          height: 36px;
        }
      }

    }
  }

  .btn-item {
    padding-top: 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
    bottom: 0;
    width: 100%;
    z-index: 99;
    border: none;

    .btn {
      background-color: #37B874;
      border-radius: 24rpx;
      width: calc(100% - 40px);
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }
}
</style>